<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        #one{
            width:200px;
            height:200px;
            border:1px solid red;
        }
        #two{
            width:100px;
            height:100px;
            border:1px solid red;
        }
        #three{
            width:100px;
            height:100px;
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div id="one">
        <div id="two">子节点</div>
        父节点
    </div>
    <!--<a href="" id="btn">删除子节点</a>-->
<!--超链接在此处不能实现删除子节点的操作：
    当点击超链接之后，删除了子节点，但是超链接href没有设置任何的属性，又刷新返回当前的页面
    实现超链接操作节点，而不进行刷新：

    -->
<!--    <a href="javascript:void(0);" id="btn">删除子节点</a>-->
    <button type="button" id="btn">删除子节点</button>
    <button type="button" id="btn_create">增加子节点</button>
</body>
</html>
<script>
<!--删除字节点-->
    var element_one = document.getElementById("one");
    var two = document.getElementById("two");
    var btn = document.getElementById("btn");
    var btn_create = document.getElementById("btn_create");
    btn.onclick = function(){
        element_one.removeChild(two);

    }
    btn_create.onclick=function () {
        //创建div的子节点
        var div3 = document.createElement("div");//创建一个div的节点
        div3.setAttribute("id","three");         //为div3提供一个属性id
        element_one.appendChild(div3);           //在父节点后面创建一个子节点

    }
    //parentNode 返回节点的父节点
    alert(two.parentNode);
</script>